<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>贪吃蛇</title>
	</head>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
	</style>
	
	<body>
		
		<script type="text/javascript">
//		创建地图
           function Map(){
           	this.width=600;
           	this.height=400;
           	this.backgroundColor='gray';
           	this.ditu=null;
           	
          //方法
          //创建地图并且显示
          //this.show=function(){ }
          if(Map.prototype.show==undefined){
          	Map.prototype.show=function(){
          		//创建div
          		var div=document.createElement('div');
          		//设置样式
          		div.style.width=this.width+'px';
          		div.style.height=this.height+'px';
          		div.style.backgroundColor=this.backgroundColor;
          		//显示到页面中
          		document.body.appendChild(div);
          		//将地图的div,保存到对象的属性
          		this.ditu=div;
          		
          	}
          }
        }
           //Map.prototype.show=function(){}
           
        var map =new Map();
        map.show();
//      console.log(map.ditu);

       //创建食物
       function Food(){
       	this.width=20;
       	this.height=20;
       	this.backgroundColor='green';
       	this.x=0;
       	this.y=0;
       	this.position='absolute';
       	this.shiwu=null;
       	//方法
       	//创建div并且显示
       	if(!Food.prototype.show){
       		Food.prototype.show=function(){
       			var div=document.createElement('div');
//     			设置样式
       			div.style.width=this.width+'px';
       			div.style.height=this.height+'px';
       			div.style.backgroundColor=this.backgroundColor;
       			//位置 生成随机x y坐标
       			//横坐标x 0-30之间（不包含30）的整数，乘以20倍（食物的宽度），就是到页面左边的距离
       			//纵坐标x 0-30之间（不包含30）的整数，乘以20倍，（食物的高度）就是到页面顶边的距离
//     			(map.width/this.width)
       			this.x=Math.floor(Math.random()*(map.width/this.width));
       			this.y=Math.floor(Math.random()*(map.height/this.height));
       			//设置位置相关的样式
       			div.style.left=this.x * this.width+'px';
       			div.style.top=this.y * this.height+'px';
       			div.style.position='absolute';
       			//显示到页面中
       			map.ditu.appendChild(div);
       			//将地图的div 保存到地图对象的属性上，后续需要使用
       			this.shiwu=div;
       		}
       	}
    }
       var food =new Food();
       food.show();
	    </script>
	</body>
</html>
